<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <span>物品清单</span>
        <el-checkbox class="ml10" :indeterminate="isIndeterminate" v-model="checkAll" @change="checkBoxAllChange">全选</el-checkbox>
        <el-button class="fr" style="padding: 3px 0" type="text" @click="pack">打包</el-button>
      </div>
      <template v-for="item in dataList">
          <template v-if="item.boxNo">
            <el-card class="fl mr10 mb10" style="width: 45%" >
              <el-descriptions :column="3" border>
                 <el-descriptions-item label="箱号" :span="2">{{item.boxNo}}</el-descriptions-item>
                 <el-descriptions-item label="物品数">
                    <i>{{item.nums}}</i>
                    <el-tooltip content="拆箱" placement="top" effect="light" class="mr10 ml10">
                      <el-popover
                        placement="top"
                        width="160"
                        v-model="item.isRemove">
                        <p>是否拆箱？</p>
                        <div style="text-align: right; margin: 0">
                          <el-button size="mini" type="text" @click="item.isRemove = false">取消</el-button>
                          <el-button type="primary" size="mini" @click="unpacking(item.boxId,item)">确定</el-button>
                        </div>
                        <el-button slot="reference" type="text" style="color: red;" icon="el-icon-box" ></el-button>
                      </el-popover>
                    </el-tooltip>
                 </el-descriptions-item>
                 <template v-for="(child,ind) in item.items">
                   <el-descriptions-item label="编号" :span="3">{{child.pno}}</el-descriptions-item>
                   <el-descriptions-item label="名称" :span="2">{{child.name}}</el-descriptions-item>
                   <el-descriptions-item label="数量" :span="1">{{child.nums}}</el-descriptions-item>
                   <el-descriptions-item label="入库编号" :span="3">{{child.qrcode}}</el-descriptions-item>
                 </template>
                 <el-descriptions-item label="仓库" :span="3">{{item.storeName}}</el-descriptions-item>
                 <el-descriptions-item label="存放位置" :span="3">
                   {{(item.areaName?item.areaName+"/":'')
                   +(item.groupName?item.groupName+"/":'')
                   +(item.cabinetName?item.cabinetName+"/":'')
                   +(item.floors?item.floors+"/":'')
                   +(item.locatorName?item.locatorName:'')}}
                 </el-descriptions-item>
              </el-descriptions>
            </el-card>
          </template>
          <template v-if="!item.boxNo">
            <el-card class="fl mr10 mb10">
              <el-descriptions :column="3" border>
                 <el-descriptions-item label="编号" :span="3">
                    <el-checkbox slot="label" :value="selection.includes(item.pno)" @change="checkBoxChange($event,item)"></el-checkbox>
                    {{item.pno}}
                 </el-descriptions-item>
                 <el-descriptions-item label="名称" :span="2">{{item.name}}</el-descriptions-item>
                 <el-descriptions-item label="数量">{{item.nums}}</el-descriptions-item>
                 <el-descriptions-item label="仓库" :span="3">{{item.storeName}}</el-descriptions-item>
                 <el-descriptions-item label="存放位置" :span="3">
                   {{(item.areaName?item.areaName+"/":'')
                   +(item.groupName?item.groupName+"/":'')
                   +(item.cabinetName?item.cabinetName+"/":'')
                   +(item.floors?item.floors+"/":'')
                   +(item.locatorName?item.locatorName:'')}}
                 </el-descriptions-item>
                 <el-descriptions-item label="入库编号" :span="3">{{item.qrcode}}</el-descriptions-item>
                 <el-descriptions-item label="保管密码" :span="3" v-if="item.isPwd">
                    <el-input show-password placeholder="请输入保管密码" v-model="item.password"/>
                 </el-descriptions-item>
                 <el-descriptions-item label="上架密码" :span="3" v-if="item.isPutPwd">
                    <el-input show-password placeholder="请输入上架密码" v-model="item.confirmPwd"/>
                 </el-descriptions-item>
              </el-descriptions>
            </el-card>
          </template>
      </template>

    </el-card>
  </div>
</template>

<script>
  import {delUnpacking} from '@/api/wms/pick'
  export default {
    props:{
      value:{
        type:[Array,Object,String]
      },
      putTaskId:{
        type:[String]
      }
    },
    data(){
      return{
        dataList:[],
        selection:[],
        isIndeterminate:false,
        checkAll: false
      }
    },
    watch:{
      value:{
        handler(newVal){
          if(newVal){
            this.dataList = newVal;
          }
        }
      }
    },
    methods:{
      //拆箱
      unpacking(boxId,item){
        if(this.putTaskId){
          if(boxId){
            delUnpacking(boxId,this.putTaskId).then(response=>{
              this.$emit('input',this.dtl2Box(response.data,item=>item.boxId))
              item.isRemove = false;
            });
          }else{
            let result = this.boxNo2Dtl(this.dataList);
            let datas = result[0];
            datas.forEach(item=>{
              item.boxNo = null;
            })
            this.$emit('input',this.dtl2BoxNo(datas,item=>item.boxId))
          }
        }else{
          let result = this.boxNo2Dtl(this.dataList);
          let datas = result[0];
          datas.forEach(item=>{
            item.boxNo = null;
          })
          this.$emit('input',this.dtl2BoxNo(datas,item=>item.boxId))
        }

      },
      checkBoxChange(flag,item){
        if(flag){
          this.selection.push(item.pno)
        }else{
          this.selection.forEach((data,index)=>{
            if(data === item.pno){
              this.selection.splice(index,1)
            }
          })
        }
        let checkedCount = this.selection.length;
        this.checkAll = checkedCount === this.dataList.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.dataList.length;
      },
      checkBoxAllChange(flag){
        this.selection = flag ? this.dataList.map(({pno})=>pno) : []
        this.isIndeterminate = false
      },
      //打包
      pack(){
         if(this.selection.length === 0){
            this.$message('请至少选择一条物品信息！');
            return false;
         }
         this.$prompt('请输入箱号','打包',{
           confirmButtonText:'确认',
           cancelButtonText:'取消'
         }).then(response=>{
           let boxNo = response.value;
           let result = this.box2Dtl(this.dataList);
           let datas = result[0];
           datas.forEach(item=>{
             if(this.selection.includes(item.pno)){
               item.boxNo = boxNo;
             }
           })
           this.$emit('input',this.dtl2BoxNo(datas,item=>item.boxNo))
         })
      }
    }
  }
</script>

<style>
</style>
